

<template>

	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption" @down="downCallback">
		<view class="top_main">
			<text>全部({{extend.total_count}})</text>
		</view>
		<view style="margin-top: 30rpx;">
			<view v-for="(group, index) in lists" :key="index" class="main">
			  <view class="group-title">
				<text>{{ group.nickname }}-{{group.mobile}}</text>
				<text class="color">({{group.count}})</text>
				<view class="right">
					<text class="text1">{{group.level_name}}</text>
					<block v-if="group.checked == false">
						<uni-icons type="up" size="22" class="icon" @click="checked(index)"></uni-icons>	
					</block>
					<block v-else>
						<uni-icons type="down" size="22" class="icon" @click="checked(index)"></uni-icons>
					</block>					
				</view>
			  </view>
			  <view class="group-items" v-if="group.checked == true && group.count > 0">
				<view v-for="(item, itemIndex) in group.childer" :key="itemIndex">
				 <text>{{ item.nickname }}-{{item.mobile}}</text>
				 <text class="color">({{item.count}})</text>
				 <view class="right">
				 	<text class="text1">{{item.level_name}}</text>
				 	<text class="text2"></text>
				 </view>
				 
				</view>
			  </view>
			</view>
		  </view>
	</mescroll-body>

</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	import {
	    userBill, userGroup
	} from "@/api/user";
import { onLoad } from "../../../components/uview-ui/libs/mixin/mixin";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/images/empty/order.png',
						tip: '暂无记录~', // 提示
					}
				},
				lists: [], // 列表数据--全部
				extend:[],
			};
		},

		methods: {
			checked(i){				
				if(!this.lists[i].checked){
					this.lists[i].checked = true					
				}
				else{
					this.lists[i].checked = false
				}
			},
			// 上拉加载 
			upCallback(page) {
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
				userGroup({
					page_size: pageSize,
					page_no: pageNum					
				}).then((data) => {
					if (page.num == 1) this.lists = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					this.lists = this.lists.concat(curPageData);
					this.extend = data.extend
					this.mescroll.endSuccess(curPageLen, data.count);
				}).catch(() => {
					this.mescroll.endErr()
				})
			}
		},
	}
</script>

<style scoped>
	.color{
		color: #f38816;
	}
	.text1{
		float: left;
		margin-right: 20rpx;
		color: #f38816;
		font-size: 24rpx;
		border: 1px solid #cebc99;
		border-radius: 10rpx;
		width: 120rpx;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
		margin-top: 17.5rpx;
	}
	.text2{
		float: left;
		width: 30rpx;
	}
	.main{
		float: left;
		width: 700rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;		
		border-radius: 5rpx;		
	}
	.top_main{
		float: left;
		width: 700rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;		
		border-radius: 5rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		background: #ffffff;
		height: 80rpx;
		line-height: 80rpx;
		text{
			float: left;
			padding-left: 10px;
		}
	}
.group-title {
  float: left;
  width: 100%;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;
  margin-bottom: 5px;
  height: 80rpx;
  line-height: 80rpx;
  .right{
	  float: right;
	  font-size: 14rpx;
  }
}
.group-items {
  float: left;
  width: 100%;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;
  /* margin-top: 5px; */
  height: 80rpx;
  line-height: 80rpx;
  .right{
  	  float: right;
  	  font-size: 14rpx;
  }
}
</style>